<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="btn">点击我显示对话框</button>
    <script>
        // 函数、类 、组件 ----> 提高代码的复用性 封装 ----> 代码的复用
        // 设计模式：----> 经验的复用--->站在巨人肩膀上写代码 
        // 设计模式 ：1.设计 ：设计原则  2.模式 ：设计模式
        // 设计原则 ： solid ：稳定的
        /* 
            1.开闭原则。
            2.单一职责原则。
            3.依赖倒置原则
            4.接口分离原则
            5.迪米特法则
            6.里氏替换原则  : 子类 可以替换父类
        */
        //    function gettype(arg){
        //        return typeof arg;
        //    }

        // 2.设计模式  23种 
        // 一、单例模式：单体模式 （一个类保证只有一个实例）
        // window document  store 都是单例 
        // 如何保证一个类只有一个实例？？
        // 记录实例化的状态
        // 1.通过全局变量记录 单例的状态
        // let instance = null;  // 记录类的实例化状态
        // class Person{
        //     constructor(name){
        //         this.name = name;
        //         this.age = 20
        //         if(!instance){
        //             // 没有实例化过
        //             instance = this;
        //         }else{
        //             // 已经实例化过了
        //             return instance;
        //         }
        //     }
        // }

        // let zhangsan = new Person("张三");
        // let lisi  = new Person("李四");
        // console.log(zhangsan,lisi);
        // console.log(zhangsan===lisi);

        // 2.通过 静态属性实现单例 static 
        // 静态成员 和实例化对象没关系， 是类的成员
        // function Person(name){
        //     this.name = name;
        //     this.age = 20;
        // }
        // Person.num = 10;   // 静态成员

        // // name 和 age 都是 this的属性 this 实例化对象
        // // let zhangsan = new Person("张三");
        // // console.log(zhangsan)
        // console.log(Person.num);

        // class Person {
        //     static instance = null;
        //     constructor(name) {
        //         this.name = name;
        //         this.age = 20
        //         if (!Person.instance) {
        //             // 没有实例化过
        //             Person.instance = this;
        //         } else {
        //             // 已经实例化过了
        //             return Person.instance;
        //         }
        //     }
        // }

        // let zhangsan = new Person("张三");
        // let lisi  = new Person("李四");

        // console.log(zhangsan,lisi);


        // 弹框实现： 全局范围内 只能有一个弹框 ；


        class Dailog {
            static instance = null;
            constructor() {
                let divEle = document.createElement("div");
                this.divEle = divEle;
                this.divEle.innerHTML = "我是弹框";
                this.divEle.style.display = "none";
                document.body.appendChild(this.divEle);
                if (!Dailog.instance) {
                    // 没有实例化过
                    Dailog.instance = this;
                } else {
                    // 已经实例化过了
                    return Dailog.instance;
                }
            }
            show() {
                this.divEle.style.display = "block";
            }
        }

        let btn = document.querySelector(".btn");
        let dailog1 = new Dailog();
        let dailog2 = new Dailog();
        console.log(dailog1,dailog2);
        btn.onclick = function(){
            dailog1.show();
            dailog2.show();
        }









    </script>
</body>

</html>